<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script>
// npm add cesium
// 将node_modules目录下的Build/Cesium 4个目录(Assets/ThirdParty/Widgets/Workers)拷贝到public目录下，然后将Widgets目录拷贝一份到src下
import * as Cesium from 'cesium'
import './Widgets/widgets.css'
// 设置cesium token
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwZDRkNWI3MC01MmRlLTQ2N2EtYTI3My01ZTgzNTM2MDA1ODQiLCJpZCI6Mzg5NTEsImlhdCI6MTY1NzI2MjIyMH0.1BRvPH1Op0Dfo6wX3pHMJjZGux8CHTq2Xwpenv45IQU'

// 设置cesium资源都在根目录下
window.CESIUM_BASE_URL = '/'

// 设置cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  //西边的经度
  89.5,
  //南边的纬度
  20.4,
  //东边的经度
  110.4,
  //北边的纬度
  61.2
)
export default {
  name: 'App',
  data() {
    return {
      TDTURL_CONFIG: {
        TDT_IMG_W:
          'http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0' +
          '&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
          '&style=default&format=tiles&tk=b0be32aaa778ffb1ffee5bd876f15c1d', //在线天地图影像服务地址(墨卡托投影)
        TDT_VEC_W:
          'http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0' +
          '&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
          '&style=default&format=tiles&tk=b0be32aaa778ffb1ffee5bd876f15c1d', //在线天地图矢量地图服务(墨卡托投影)
        TDT_CIA_W:
          'http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0' +
          '&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
          '&style=default.jpg&tk=b0be32aaa778ffb1ffee5bd876f15c1d', //在线天地图影像中文标记服务(墨卡托投影)
        TDT_CVA_W:
          'http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0' +
          '&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
          '&style=default.jpg&tk=b0be32aaa778ffb1ffee5bd876f15c1d', //在线天地图矢量中文标记服务(墨卡托投影)
        TDT_IMG_C:
          'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
          '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
          '&style=default&format=tiles&tk=b0be32aaa778ffb1ffee5bd876f15c1d', //在线天地图影像服务地址(经纬度)
        TDT_VEC_C:
          'http://{s}.tianditu.gov.cn/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
          '&LAYER=vec&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
          '&style=default&format=tiles&tk=b0be32aaa778ffb1ffee5bd876f15c1d', //在线天地图矢量地图服务(经纬度)
        TDT_CIA_C:
          'http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
          '&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
          '&style=default&format=tiles&tk=b0be32aaa778ffb1ffee5bd876f15c1d', //在线天地图影像中文标记服务(经纬度)
        TDT_CVA_C:
          'http://{s}.tianditu.gov.cn/cva_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
          '&LAYER=cva&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
          '&style=default&format=tiles&tk=b0be32aaa778ffb1ffee5bd876f15c1d', //在线天地图矢量中文标记服务(经纬度)
      },
    }
  },
  components: {},
  mounted() {
    let viewer = new Cesium.Viewer('cesiumContainer', {
      // 是否显示信息窗口
      infoBox: false,
      // 添加地形
      terrainProvider: Cesium.createWorldTerrain({
        // 添加光照效果
        requestVertexNormals: true,
        // 添加水文效果
        requestWaterMask: true,
      }),
      // 是否显示查询按钮
      geocoder: false,
      // 不显示home按钮
      homeButton: false,
      // 控制查看器的显示模式
      sceneModePicker: false,
      // 是否显示图层选择
      baseLayerPicker: false,
      //是否显示帮助按钮
      navigationHelpButton: false,
      // 是否播放动画
      animation: false,
      // 是否显示时间轴
      timeline: false,
      //是否显示全屏按钮
      fullscreenButton: false,
      // 设置天空盒
      skyBox: new Cesium.SkyBox({
        sources: {
          positiveX: './texture/sky/px.jpg', // right
          negativeX: './texture/sky/nx.jpg', // left
          positiveY: './texture/sky/ny.jpg', // back
          negativeY: './texture/sky/py.jpg', // front
          positiveZ: './texture/sky/pz.jpg', // up
          negativeZ: './texture/sky/nz.jpg', // down
        },
      }),
      // 天地图影像图
      imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        url: this.TDTURL_CONFIG.TDT_IMG_C,
        layer: 'tdtImg_c',
        style: 'default',
        format: 'tiles',
        tileMatrixSetID: 'c',
        subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
        tilingScheme: new Cesium.GeographicTilingScheme(),
        tileMatrixLabels: [
          '1',
          '2',
          '3',
          '4',
          '5',
          '6',
          '7',
          '8',
          '9',
          '10',
          '11',
          '12',
          '13',
          '14',
          '15',
          '16',
          '17',
          '18',
          '19',
        ],
        maximumLevel: 18,
        show: false,
      }),
    })
    // 地图叠加，使用高德地图矢量图
    let imageryLayers = viewer.imageryLayers
    let layer = imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        // url: './terrain',
        minimumLevel: 3,
        maximumLevel: 18,
      })
    )
    // 设置图层的透明度
    layer.alpha = 0

    // 隐藏logo
    viewer.cesiumWidget._creditContainer.style.display = 'none'

    /**
     *  坐标系
     *1.屏幕坐标系，二维的笛卡尔坐标系，cartesian2类型
     *2.地理坐标系，WGS-84坐标系，cartographic类型，经度/纬度/高度
     *3.笛卡尔空间直角坐标系，cartesian3类型
     */

    // 1.角度与弧度的转换
    let radians = Cesium.Math.toRadians(90) // 弧度
    console.log('弧度：', radians)
    // 2.弧度转角度
    let degrees = Cesium.Math.toDegrees(2 * Math.PI)
    console.log('角度：', degrees)
    // 3.将经纬度转换为笛卡尔坐标
    let cartesian3 = Cesium.Cartesian3.fromDegrees(
      89.5, // 经度
      20.4, // 纬度
      100 // 高度
    )
    console.log('笛卡尔坐标：', cartesian3)
    // 4.将笛卡尔坐标转为经纬度
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian3)
    // 转换完之后的经纬度为弧度制
    let { longitude, latitude } = cartographic
    let lng = Cesium.Math.toDegrees(longitude)
    let lat = Cesium.Math.toDegrees(latitude)
    console.log('弧度转为角度的值：', lng, lat)
    console.log('经纬度：', cartographic)

    // 相机的方向和位置
    // 1.setView瞬间到达指定位置，视角
    // let position = Cesium.Cartesian3.fromDegrees(116.394428, 39.90923, 1000)
    let guangzhouPosition = Cesium.Cartesian3.fromDegrees(
      113.3191,
      23.109,
      1000
    )
    viewer.camera.flyTo({
      // setView和flyTo两种
      //指定相机位置
      destination: guangzhouPosition,
      orientation: {
        heading: Cesium.Math.toRadians(0), // 偏航角
        pitch: Cesium.Math.toRadians(-90), // 俯仰角
        roll: 0, // 翻滚角
      },
    })

    // 2.通过按键移动相机
    document.addEventListener('keydown', (e) => {
      //获取相机离地面的高度
      let height = viewer.camera.positionCartographic.height
      let moveRate = height / 100
      if (e.key == 'w') {
        viewer.camera.moveForward(moveRate) // 前进
      } else if (e.key == 's') {
        viewer.camera.moveBackward(moveRate) // 后退
      } else if (e.key == 'a') {
        viewer.camera.moveLeft(moveRate) // 左移
      } else if (e.key == 'd') {
        viewer.camera.moveRight(moveRate) // 右移
      } else if (e.key == 'q') {
        viewer.camera.lookLeft(Cesium.Math.toRadians(0.1)) // 向左
      } else if (e.key == 'e') {
        viewer.camera.lookRight(Cesium.Math.toRadians(0.1)) // 向右
      } else if (e.key == 'r') {
        viewer.camera.lookUp(Cesium.Math.toRadians(0.1)) // 向上
      } else if (e.key == 'f') {
        viewer.camera.lookDown(Cesium.Math.toRadians(0.1)) // 向下
      } else if (e.key == 't') {
        viewer.camera.twistLeft(Cesium.Math.toRadians(0.1)) //  向左逆时针翻滚
      } else if (e.key == 'g') {
        viewer.camera.twistRight(Cesium.Math.toRadians(0.1)) //  向右逆时针翻滚
      }
    })

    /**
     * 添加物体与3D建筑物
     */
    // 1.添加3D建筑
    viewer.scene.primitives.add(new Cesium.createOsmBuildings())
  },
  created() {},
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
